import React , {Component} from 'react';
import Select from '@/components/Select/index';
import { Card,Col, Row,Input ,Space , Tag ,Table, Button} from 'antd';
import Loading from '@/components/Loading/index';
import ThreeTest from '@/components/ThreeTest/index';
class Home extends Component{
  constructor(props){
    const  deleteItem = (index)=>{
      this.setState({data:this.state.data.filter((v)=>v.key!==index)})}
      const alerts = (index)=>{
        let data  =JSON.parse(JSON.stringify( this.state.data.find((v)=>v.key === index)))
        data.key = data.key+4
        let list =[...this.state.data]
        list.push(data)
        console.log(list);
        this.setState({data:Object.assign(list)})
      }
    super(props);
    this.state={
      loading:false,
      value:2,
      columns:[
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <span>{text}</span>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          render: (_, { tags }) => (
            <>
              {tags.map((tag) => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: 'Action',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
              <span onClick={()=>alerts(record.key)}>复制{record.name}</span>
              <span onClick={()=>deleteItem(record.key)}>删除</span>
            </Space>
          ),
        },
      ],
      data : []
    }
  }
  componentDidMount(){
    this.setState({loading:true})
    this.props.setLoading(true)
    setTimeout(() => {
      this.getData()
      this.props.setLoading(false)
      this.setState({loading:false})
    },2000);
  }
   getData = ()=>{
    this.setState({data:[
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },
    ]})
  }
  render(){
    const submit = ()=>{
    console.log(this.state.data);
  }
  const getValue = (data)=>{
   this.setState({value:data})
  }
    return (
      <div  style={{width:`100%`,height:`100%`}}>
 <Card
    hoverable
    cover={<Input  placeholder="Basic usage"  value={this.state.value} onChange={(e)=>this.setState({value:e.target.value-0})} />}
  >
     <Row>
      <Col span={6}>
        <Button type="primary" onClick={submit}>提交</Button>
         <Select onGetValue={getValue} value={this.state.value}></Select>
      </Col>
      <Col span={18}><Table loading={this.state.loading} columns={this.state.columns} dataSource={this.state.data} /></Col>
    </Row>
  </Card>
  <ThreeTest />
      </div>
   )
  }
}
export default Loading(Home)